<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE composition
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:a="http://java.sun.com/jsf/composite" xml:lang="en" lang="en"
                template="layout.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:p="http://primefaces.prime.com.tr/ui">
    <ui:define name="content">
        <f:view contentType="text/html">
        <h1>
            <h:outputLabel value="#{msg.createAlbum}" rendered="#{createEditAlbumController.newAlbum}"/>
            <h:outputLabel value="#{msg.editAlbum}" rendered="#{!createEditAlbumController.newAlbum}" />
        </h1>
        <h:outputLabel value="#{msg.infoAlbum1}" rendered="#{!userController.eingeloggt}"/>
        <h:form rendered="#{userController.eingeloggt}" prependId="false">
            <table>
                <tr>
                    <td><h:outputLabel value="#{msg.albumTitle}"/></td>
                    <td>
                        <!-- TODO required einbauen -->
                        <h:inputText id="createAlbumName" value="#{createEditAlbumController.albumName}" required="true"
                                     requiredMessage="#{msg.forgotAlbumName}">
                            <f:validateLength minimum="1" />
                        </h:inputText>
                    </td>
                    <td><h:message for="createAlbumName" style="color:red;"/></td>
                </tr>
                <tr>
                    <td><h:outputLabel value="#{msg.albumDescription}"/></td>
                    <td><h:inputTextarea value="#{createEditAlbumController.albumBeschreibung}"/></td>
                </tr>
                <tr>
                    <td>
                        <h:outputLink value="#" title="Upload"
                                      onclick="uploader.upload();">#{msg.upload}</h:outputLink> |
                        <h:outputLink value="#" title="Cancel" onclick="uploader.clear();">#{msg.abort}</h:outputLink>
                        <br/>
                        <p:fileUpload widgetVar="uploader" customUI="true" label="#{msg.uploadImage}"
                                      description="*.jpg;*.JPG"
                                      allowTypes="*.jpg;*.JPG"
                                      fileUploadListener="#{createEditAlbumController.handleFileUpload}"
                                      multiple="true" id="fileUploader" update="messages, cgrid"/>
                        <p:growl id="messages" showDetail="true"/>
                    </td>
                </tr>
            </table>
            <!--<h:commandLink value="123" action="createAlbum2" />-->
        <!--</h:form>-->
        <!--<h:form rendered="#{userController.eingeloggt}" prependId="false" id="cgrid">-->
            <p:dataGrid id="cgrid" var="b" value="#{createEditAlbumController.bilder}" columns="3"
                        rows="12" paginator="false" effect="true"
                        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        rowsPerPageTemplate="9,12,15">

                <p:column>
                    <p:panel header="#{b.name}" style="text-align:center">
                        <h:panelGrid columns="1" style="width:100%">
                            <h:form>
                            <p:graphicImage value="#{createEditAlbumController.image}" width="20%"
                                            height="20%">
                                <f:param name="name" value="#{b.name}"/>
                            </p:graphicImage>
                            </h:form>



                            <p:commandLink value="#{msg.deleteImage}" onclick="dialogDeleteBildInfo.show();"/>
                            <p:dialog header="#{msg.deletePic}" widgetVar="dialogDeleteBildInfo" modal="true"
                                      height="200">
                                <h:outputText value="#{msg.deletePicInfo}"/>
                                <br/>
                                <br/>
                                <h:commandButton value="#{msg.yes}" action="#{createEditAlbumController.loescheBild}">
                                    <f:param name="bildID" value="#{b.bildID}"/>
                                </h:commandButton>
                                <h:commandButton value="#{msg.no}" action="#{createEditAlbumController.ladeAlbum}">
                                    <f:param name="AlbumName" value="#{albumController.albumName}"/>
                                </h:commandButton>
                            </p:dialog>


                            <h:selectBooleanCheckbox id="selectPublic" value="#{b.publicBild}"
                                                     title="#{msg.imageIsPublic}">
                                <p:ajax event="change" update="selectPublic"
                                        action="#{createEditAlbumController.checkboxSelectAction}">
                                    <f:setPropertyActionListener value="#{b.bildID}"
                                                                 target="#{createEditAlbumController.selectedBId}"/>
                                </p:ajax>
                            </h:selectBooleanCheckbox>
                            <h:outputLabel value="#{msg.imageIsPublic}"/>
                            <h:commandLink value="#{msg.editImage}" action="#{bildController.loadBilddaten}">
                                <f:param name="bildid" value="#{b.bildID}" />
                            </h:commandLink>
                        </h:panelGrid>
                    </p:panel>
                </p:column>
            </p:dataGrid>
            <!--</h:form>-->
        <!--</h:form>-->
        <!--<h:form id="saveAlbum" rendered="#{userController.eingeloggt}">-->
            <h:commandButton value="#{msg.save}" action="#{createEditAlbumController.createAlbum}" rendered="#{createEditAlbumController.newAlbum}"/>
            <h:commandButton value="#{msg.save}" action="#{createEditAlbumController.updateAlbum}" rendered="#{!createEditAlbumController.newAlbum}" />
            <h:commandButton value="#{msg.abort}" action="allAlbums" rendered="#{createEditAlbumController.newAlbum}"/>
            <h:commandButton value="#{msg.abort}" action="#{createEditAlbumController.abortEdit}" rendered="#{!createEditAlbumController.newAlbum}" />
        </h:form>
        <!--<h:messages for="saveAlbum" style="color:red;"/>-->
        </f:view>
    </ui:define>
</ui:composition>